<template>
    <a-layout>
        <Header/>
        <a-layout style="height: calc(100vh - 64px)">
            <a-layout-sider style="background: #fff;width: 200px;height: 100%;overflow-y: auto;overflow-x: hidden">
                <a-menu
                        mode="inline"
                        :style="{ height: '100%', borderRight: 0 }"
                >
                    <a-sub-menu v-for="(item,i) in menuList" :key="item.id">
                        <template #title>
                            {{item.name}}
                        </template>
                        <template v-if="item.children != undefined">
                            <a-menu-item v-for="(val,index) in item.children" :key="val.id">
                                <router-link :to="val.url">{{val.name}}</router-link>
                            </a-menu-item>
                        </template>
                    </a-sub-menu>
                </a-menu>
            </a-layout-sider>
            <a-layout style="overflow-y: auto;overflow-x: hidden">
                <router-view/>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script setup>
    import Header from '../components/Header'
    import {ref, onBeforeMount} from 'vue'
    import store from '@/store'
    import axios from 'axios'

    const loginUser = ref({})
    const menuList = ref([])

    const getMenuList = () => {
        axios.get('menu/queryMenuByUserId/' + loginUser.value.id).then(rs => {
            if (rs.data.code == 200) {
                menuList.value = rs.data.data
            }
        })
    }

    onBeforeMount(() => {
        loginUser.value = store.state.user
        getMenuList()
    })


</script>

<style>

</style>
